<script setup lang="ts">
import { ref, computed, reactive, watch } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const testText = ref('1234')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

// watch(testText, (old, new) => {

// })



const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

const test = reactive({
  active: true,
  danger: true
})

const sets = ref([
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
])

function even(numbers: any[]) {
  return numbers.filter((number) => number % 2 === 0)
}

</script>

<template>

  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <div class="about">

          <h1>This is an about page</h1>
          <div class="button-example">
            <div class="button-row">
              <el-button>Default</el-button>
              <el-button type="primary">Primary</el-button>
              <el-button type="success">Success</el-button>
              <el-button type="info">Info</el-button>
              <el-button type="warning">Warning</el-button>
              <el-button type="danger">Danger</el-button>
            </div>
          </div>
          <h2 :class="test">{{ fullName }}</h2>

          <p>{{ testText }}</p>


          <li v-for="(value, key) in myObject">
            {{ key }}: {{ value }}
          </li>

          <ul v-for="numbers in sets">
            <li v-for="n in even(numbers)">{{ n }}</li>
          </ul>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}

.button-example {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.button-row>* {
  margin: 0;
}
</style>
